﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Droplist</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://www.gstatic.com/codesite/ph/images/phosting.ico" />
	<link rel="stylesheet" type="text/css" href="_css/droplist.css" />
	<link rel="stylesheet" type="text/css" href="_css/context.css" />
</head>

<body class="LNG_en LNG_en-US RGN_US">

	<div class="col">
	
		<h1>Using lists</h1>

		<div class="sample">
			<h2>Simple</h2>
			<ul class="droplist droplist-by-list">
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">A1</a></li>
				<li><a href="http://www.ask.com">A2</a></li>
				<li><a href="http://www.beta.com">Beta</a></li>
				<li class="selected"><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Default text</h2>
			<ul class="droplist droplist-by-list" title="Choose an item">
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Long text</h2>
			<ul class="droplist droplist-by-list">
				<li><a href="http://www.google.com">Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text </a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Selected item</h2>
			<ul class="droplist droplist-by-list">
				<li><a href="http://www.google.com">Google</a></li>
				<li  class="selected"><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<div class="lin-hor-dotted"><hr /></div>
		
		<div class="sample">
			<h2>Sub items</h2>
			<ul class="droplist droplist-by-list">
				<li>
					<a href="1">1</a>
					<ul>
						<li><a href="1.1">1.1</a></li>
						<li><a href="1.2">1.2</a></li>
					</ul>
				</li>
				<li>
					<a href="2">2</a>
					<ul>
						<li><a href="2.1">2.1</a></li>
						<li class="selected"><a href="2.2">2.2</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Custom scroll</h2>
			<ul class="droplist droplist-by-list">
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Listener "change.droplist"</h2>
			<ul class="droplist droplist-by-list-change">
				<li><a href="http://www.google.com">Google</a></li>
				<li><a href="http://www.yahoo.com">Yahoo</a></li>
				<li><a href="http://www.ask.com">Ask</a></li>
				<li><a href="http://www.bing.com">Bing</a></li>
			</ul>
		</div>
		
		<hr />
		
		<div class="sample">
			<h2>Callback calling tabs "helper"</h2>
			<ul class="droplist droplist-by-list-tabs">
				<li><a href="#ctn-google">Google</a></li>
				<li><a href="#ctn-yahoo">Yahoo</a></li>
				<li><a href="#ctn-ask">Ask</a></li>
				<li><a href="#ctn-bing">Bing</a></li>
			</ul>
			<div class="tabs">
				<div id="ctn-google" style="display:none">Google search is a web search engine owned by Google Inc. and is the most-used search engine on the Web.</div>
				<div id="ctn-yahoo" style="display:none">Yahoo! Inc. is an American public corporation headquartered in Sunnyvale, California, (in Silicon Valley), that provides Internet services.</div>
				<div id="ctn-ask" style="display:none">Ask.com (or Ask Jeeves in the United Kingdom) is a search engine started in 1996 by Garrett Gruener and David Warthen in Berkeley, California.</div>
				<div id="ctn-bing" style="display:none">Bing (formerly Live Search, Windows Live Search, and MSN Search) is the current web search engine from Microsoft.</div>
			</div>
		</div>

	</div>
	
	<hr />
	
	<div class="col">
	
		<h1>Using forms</h1>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-1">Label</label>
					<select id="droplist-by-select-1" name="comboName" class="droplist droplist-by-select">
						<option value="0">Google</option>
						<option value="0">Google</option>
						<option value="0">Google</option>
						<option value="0">Google</option>
						<option value="1">Yahoo</option>
						<option value="1">Yahoo</option>
						<option value="1">Yahoo</option>
						<option value="1">Yahoo</option>
						<option value="2">Ask</option>
						<option value="3">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-2">Default text</label>
					<select id="droplist-by-select-2" name="comboName" class="droplist droplist-by-select" title="Choose an item">
						<option value="0">Google</option>
						<option value="1">Yahoo</option>
						<option value="2">Ask</option>
						<option value="3">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-3">Long text</label>
					<select id="droplist-by-select-3" name="comboName" class="droplist droplist-by-select">
						<option value="0">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </option>
						<option value="1">Yahoo</option>
						<option value="2">Ask</option>
						<option value="3">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-4">Selected item</label>
					<select id="droplist-by-select-4" name="comboName" class="droplist droplist-by-select">
						<option value="0">Google</option>
						<option value="1" selected="selected">Yahoo</option>
						<option value="2">Ask</option>
						<option value="3">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-5">Sub items (optgroup)</label>
					<select id="droplist-by-select-5" name="comboName" class="droplist droplist-by-select">
						<optgroup label="1">
							<option value="1.1">1.1</option>
							<option value="1.2">1.2</option>
						</optgroup>
						<optgroup label="2">
							<option value="2.1">2.1</option>
							<option value="2.2" selected="selected">2.2</option>
						</optgroup>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />

		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-6">Custom scroll</label>
					<select id="droplist-by-select-6" name="comboName" class="droplist droplist-by-select">
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />
		
		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-7">Listener "change.droplist"</label>
					<select id="droplist-by-select-7" name="comboName" class="droplist droplist-by-select-change">
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
		
		<hr />
		
		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-8">Submit</label>
					<select id="droplist-by-select-8" name="comboName" class="droplist droplist-by-select">
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
					</select>
					<input type="submit" name="action" value="Send" />
				</fieldset>
			</form>
		</div>
		
		<div class="sample">
			<form method="get" action="">
				<fieldset>
					<label for="droplist-by-select-9">Disabled</label>
					<select id="droplist-by-select-9" disabled="disabled" name="comboName" class="droplist droplist-by-select">
						<option value="www.google.com">Google</option>
						<option value="www.yahoo.com">Yahoo</option>
						<option value="www.ask.com">Ask</option>
						<option value="www.bing.com">Bing</option>
					</select>
				</fieldset>
			</form>
		</div>
	
	</div>
	
	<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="_js/jquery.mousewheel.js"></script>
	<script type="text/javascript" charset="utf-8" src="_js/jquery.jScrollPane.js"></script>
	<script type="text/javascript" charset="utf-8" src="_js/jquery.droplist.js"></script>
	<script type="text/javascript" charset="utf-8" src="_js/samples.js"></script>
		
</body>
</html>